import React, { Component } from 'react';
 // 第1步：
 import {View, Button, Image} from 'react-native'
 import ImagePicker from 'react-native-image-picker'
 var photoOptions = {
   //底部弹出框选项
   title: '请选择',
   cancelButtonTitle: '取消',
   takePhotoButtonTitle: '拍照',
   chooseFromLibraryButtonTitle: '选择相册',
   quality: 0.75,
   allowsEditing: true,
   noData: false,
   storageOptions: {
     skipBackup: true,
     path: 'images'
   }
 }

export default class Photo extends Component{
  static navigationOptions = {
    title: '拍照吧',
  };

  // 第2步：
  constructor(props) {
    super(props);
      this.state = {
        imgURL: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1563980539,1672265910&fm=26&gp=0.jpg'
      }
    }

  render(){
    return <View style={{alignItems:'center',padding:30}}>
      {/* // 第3步： */}
      <Image source={{ uri: this.state.imgURL }} style={{ width: 200, height: 200 ,borderRadius:100}}></Image>
      <Button title="拍照" onPress={this.cameraAction}></Button>
      
    </View>
  }

  // 第4步：
  cameraAction = () => {
    ImagePicker.showImagePicker(photoOptions, (response) => {
      console.log('response' + response);
      if (response.didCancel) {
        return
      }
      this.setState({
        imgURL: response.uri
      });
    })
  }
}